/* ======================================================================= */
/* IMAGE
/* ======================================================================= */

.frame{
	position: relative;
	display: inline-block;
	width: 100%;
	height: 0;
	background-size: contain;
	background-position: 0 0;
	background-repeat: no-repeat;

	.frame-content{
		position: absolute;
		overflow: hidden;

		img{
			width: 100%;
		}
	}
}

/* ----- iphone ----- */

.frame-iphone{
	padding-top: percentage(1200/568);
	background-image: url(../img/devices/iphone5_white.png);

	&.hd{
		background-image: url(../img/devices/hd/iphone5_white.png);
	}

	&.black{
		background-image: url(../img/devices/iphone5_black.png);

		&.hd{
			background-image: url(../img/devices/hd/iphone5_black.png);
		}
	}

	.frame-content{
		top: 14.3%;
		left: 8.3%;
		width: 85.1%;
		height: 71.6%;
	}
}

/* ----- iphone landscape ----- */

.frame-iphone-landscape{
	padding-top: percentage(575/1200);
	background-image: url(../img/devices/iphone5_white_h.png);

	&.hd{
		background-image: url(../img/devices/hd/iphone5_white_h.png);
	}

	&.black{
		background-image: url(../img/devices/iphone5_black_h.png);

		&.hd{
			background-image: url(../img/devices/hd/iphone5_black_h.png);
		}
	}

	.frame-content{
		top: 7.2%;
		left: 13.5%;
		width: 72.5%;
		height: 86.1%;
	}
}

/* ----- ipad ----- */

.frame-ipad{
	padding-top: percentage(1200/842);
	background-image: url(../img/devices/ipad_air_white.png);

	&.hd{
		background-image: url(../img/devices/hd/ipad_air_white.png);
	}

	&.black{
		background-image: url(../img/devices/ipad_air_black.png);

		&.hd{
			background-image: url(../img/devices/hd/ipad_air_black.png);
		}
	}

	.frame-content{
		top: 8.5%;
		left: 6%;
		width: 88.4%;
		height: 82.6%;
	}
}

/* ----- ipad landscape ----- */

.frame-ipad-landscape{
	padding-top: percentage(850/1200);
	background-image: url(../img/devices/ipad_air_white_h.png);

	&.hd{
		background-image: url(../img/devices/hd/ipad_air_white_h.png);
	}

	&.black{
		background-image: url(../img/devices/ipad_air_black_h.png);

		&.hd{
			background-image: url(../img/devices/hd/ipad_air_black_h.png);
		}
	}

	.frame-content{
		top: 5.9%;
		left: 8.6%;
		width: 82.9%;
		height: 87.8%;
	}
}

/* ----- macbook ----- */

.frame-macbook{
	padding-top: percentage(600/1010);
	background-image: url(../img/devices/macbook_air.png);

	&.hd{
		background-image: url(../img/devices/hd/macbook_air.png);
	}

	.frame-content{
		top: 6.4%;
		left: 17.4%;
		width: 65.4%;
		height: 69.4%;
	}
}

/* ----- monitor ----- */

.frame-monitor{
	padding-top: percentage(920/1200);
	background-image: url(../img/devices/monitor.png);

	&.hd{
		background-image: url(../img/devices/hd/monitor.png);
	}

	.frame-content{
		top: 5.2%;
		left: 4.1%;
		width: 92%;
		height: 67.9%;
	}
}